<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<script type="text/javascript" src="./js/flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/flex.css">
	<script type="text/javascript" src="js/iscroll.js"></script>
	<title>左右滚动</title>
	<style type="text/css">
		.cont{position: relative;height: 140px;overflow: hidden;width: 100%;margin-bottom: 20px;}
		.cont .list{margin:10px;width:100px;height:100px;font-size: 30px;background: #999;color: #fff;}
		.scrollW{width: 19.1rem;}
		/*滚动条样式*/
		.scroll-bar{width: 2px;height: 0px; position: absolute; right:2px; top: 0px; z-index: 100 ;background: #0099d9;}
		.scroll-bar span{display: block;width: 100%;height: 96%;position: absolute; left: 0;top: 2%;background: rgba(0,0,0,.8);border-radius: 15px;-webkit-transition: all .3s  ease;transition: all .3s  ease;opacity: 1}
		.scroll-bar2{width: auto;height: 2px; position: absolute; left:0px; right: auto; top: auto; bottom: 2px; z-index: 100;padding:0 3px;  }
		.scroll-bar2 span{display: block;width: 100%;height: 100%;position: relative; left: 0%;top: 0;background: rgba(0,0,0,.8);border-radius: 15px;-webkit-transition: all .3s  ease;transition: all .3s  ease;opacity: 1}
	</style>
</head>
<body>
	<div class="cont" x>
		<ul class="scrollW" id="scrollBar" flex="">
			<li class="list" flex="main:center cross:center">1</li>
			<li class="list" flex="main:center cross:center">2</li>
			<li class="list" flex="main:center cross:center">3</li>
			<li class="list" flex="main:center cross:center">4</li>
		</ul>
		<div class="scroll-bar scroll-bar2"></div>
	</div>
	<div class="cont cont2">
		<ul class="scrollW" id="scrollBar" style="width: auto">
			<li class="list" flex="main:center cross:center">
				1
			</li>
			<li class="list" flex="main:center cross:center">
				2
			</li>
			<li class="list" flex="main:center cross:center">
				3
			</li>
		</ul>
		<div class="scroll-bar"></div>
	</div>
	<script type="text/javascript">
		//传入元素的id或者class
		var s = new iScroll('.cont');
		// s.top(function(a){
		//     //达到顶部执行,this为当前dom，a代表移动的距离
		// });
		// s.bottom(function(a,b){
		//     //达到底部执行,this为当前dom，a代表移动的距离，b代表总的滑动距离
		// });
		s.resize(); //用于添加内容或者自适应的时候，重新计算滚动条高度
		var s2 = new iScroll('.cont2');
	</script>
</body>
</html>